<template>
  <view class="banner">
    <image class="banner-img" src="@/static/images/home/banner.png"></image>
    <view v-if="false" class="topSwiper">
      <up-swiper
        :list="list1"
        circular
        @change="(e) => (currentNum = e.current)"
        @click="click"
      >
        <template #indicator>
          <view class="indicator">
            <view
              class="indicator__dot"
              v-for="(item, index) in list1"
              :key="index"
              :class="[index === currentNum && 'indicator__dot--active']"
            >
            </view>
          </view>
        </template>
      </up-swiper>
    </view>
    <view v-if="list1.length > 0" style="height: 24rpx"></view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";

const list1 = reactive([
  "https://cdn.uviewui.com/uview/swiper/swiper1.png",
  "https://cdn.uviewui.com/uview/swiper/swiper2.png",
  "https://cdn.uviewui.com/uview/swiper/swiper3.png",
]);
const currentNum = ref(0);

onLoad((options) => {});
</script>

<style lang="scss" scoped>
.banner {
  margin-left: 24rpx;
  width: calc(100vw - 48rpx);
  height: 210rpx;
  border-radius: 16rpx;
  // padding-bottom: 24rpx;
  &-img {
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
  }
}
.topSwiper {
  margin-left: 24rpx;
  // margin-bottom: 36rpx;
  width: calc(100vw - 48rpx);
  height: 246rpx;
  .indicator {
    @include flex(row);
    align-items: center;
    justify-content: center;
    height: 14rpx;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 7rpx;

    &__dot {
      height: 6rpx;
      width: 6rpx;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.8);
      margin: 0 4rpx;
      transition: background-color 0.3s;

      &--active {
        background-color: #ffffff;
        width: 12rpx;
        height: 6rpx;
        border-radius: 5rpx;
      }
    }
  }
}
</style>
